<template>
  <div class="bind-account">
    <public-head title="业主绑定"></public-head>
    <div class="logo"></div>

    <yd-cell-group>
      <yd-cell-item>
        <yd-icon slot="icon" name="ucenter-outline" size=".45rem"></yd-icon>
        <span slot="left">真实姓名：</span>
        <span slot="right">
          <yd-input slot="right" v-model="name" placeholder="请输入姓名"></yd-input>
        </span>
      </yd-cell-item>
      <yd-cell-item>
        <yd-icon slot="icon" name="order" size=".45rem"></yd-icon>
        <span slot="left">身份证号：</span>
        <span slot="right">
          <yd-input slot="right" v-model="idcard" placeholder="请输入您的身份证号"></yd-input>
        </span>
      </yd-cell-item>
      <yd-cell-item>
        <yd-icon slot="icon" name="phone3" size=".45rem"></yd-icon>
        <span slot="left">手机号：</span>
        <span slot="right">
          <yd-input slot="right" v-model="phone" placeholder="请输入您的手机号码"></yd-input>
        </span>
      </yd-cell-item>
      <yd-cell-item>
        <yd-icon slot="icon" name="verifycode" size=".45rem"></yd-icon>
        <input type="text" slot="right" placeholder="请输入验证码" v-model="code">
        <yd-sendcode slot="right" v-model="start" @click.native="getAuthCode" type="warning"></yd-sendcode>
      </yd-cell-item>
    </yd-cell-group>
    <yd-button size="large" type="primary" @click.native="submit">绑定</yd-button>
    <loading v-if="is_loading"></loading>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      idcard: "", //身份证号
      phone: "", // 手机号码
      name: "", // 真实姓名
      code: "", //验证码
      timestamp: "", //时间戳
      hash: "", //验证码哈希值
      owner_id: "", // 公司id
      prevRouter: null, // 上一个路由
      change_source: "", // 修改来源
      start: false, //是否已开始发送验证码
      auth_time: 0 //倒计时 计数器
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.prevRouter = from.path;
    });
  },
  created() {},
  methods: {
    getAuthCode() {
      // 验证手机号码合法性
      let reg = /^0?1[3|4|5|7|8][0-9]\d{8}$/;
      let phoneNum = this.phone,
        name = this.name;
      if (phoneNum == "") {
        this.$dialog.toast({
          mes: "手机号码不能为空",
          timeout: 1000,
          icon: "error"
        });
        return;
      }
      if (!reg.test(phoneNum)) {
        this.$dialog.toast({
          mes: "请输入正确的手机号码格式",
          timeout: 1000,
          icon: "error"
        });
        return;
      }
      this.$dialog.loading.open("发送中...");
      this.axios
        .post(root + "/api/member/sendVerifyCode", {
          phone: this.phone
        })
        .then(res => {
          if (res.data.status == 1) {
            this.hash = res.data.data.hash;
            this.timestamp = res.data.data.timestamp;
            this.start = true;
            this.$dialog.loading.close();
          } else {
            this.$dialog.toast({
              mes: res.data.message,
              timeout: 1000,
              icon: "error"
            });
          }
        });
    },
    submit() {
      // 验证手机号码合法性
      let reg = /^0?1[3|4|5|7|8][0-9]\d{8}$/;
      let phoneNum = this.phone,
        name = this.name,
        code = this.code,
        idcard = this.idcard;
      if (idcard == "") {
        this.$dialog.toast({
          mes: "请输入您的身份证号",
          timeout: 1000,
          icon: "error"
        });
        return;
      }
      if (phoneNum == "") {
        this.$dialog.toast({
          mes: "手机号码不能为空",
          timeout: 1000,
          icon: "error"
        });
        return;
      }
      if (!reg.test(phoneNum)) {
        this.$dialog.toast({
          mes: "请输入正确的手机号码格式",
          timeout: 1000,
          icon: "error"
        });
        return;
      }
      if (name == "") {
        this.$dialog.toast({
          mes: "请输入个人姓名",
          timeout: 1000,
          icon: "error"
        });
        return;
      }
      if (code == "") {
        this.$dialog.toast({
          mes: "请输入个请输入验证码人姓名",
          timeout: 1000,
          icon: "error"
        });
        return;
      }
      // 提交
      this.isLoading(true);
      this.axios
        .post(root + "/api/member/bind", {
          token: this.getToken(),
          owner_id: this.owner_id,
          name: this.name,
          phone: this.phone,
          idcard: this.idcard,
          hash: this.hash,
          code: this.code,
          timestamp: this.timestamp
        })
        .then(res => {
          this.isLoading(false);
          if (res.data.status == 1) {
            this.$dialog.toast({
              mes: res.data.message,
              timeout: 1000,
              icon: "error",
              callback: () => {
                this.$router.replace(this.prevRouter);
              }
            });
          } else {
            this.$dialog.toast({
              mes: res.data.message,
              timeout: 1000,
              icon: "error"
            });
          }
        });
    },
    ...mapActions(["isLoading"])
  },
  computed: {
    ...mapState(["toast", "toastText", "token", "is_loading"])
  }
};
</script>

<style lang="less" scoped>
@import "../../common/style/mixin.less";
.bind-account {
  height: 100%;

  .logo {
    height: 2.5rem;
    background: #fff url("./bg-house.png") no-repeat;
    background-size: 2.5rem 2.5rem;
    background-position: center;
  }
}
</style>